import 'package:flutter/material.dart';
import '../ui_components.dart';

/// UI组件示例页面
class ExamplePage extends StatefulWidget {
  const ExamplePage({super.key});

  @override
  State<ExamplePage> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  ButtonState buttonState = ButtonState.idle;
  LoadingState loadingState = LoadingState.loading;
  ListState listState = ListState.loading;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('UI组件示例'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildSectionTitle('骨架屏组件'),
            _buildSkeletonExamples(),
            const SizedBox(height: 32),
            
            _buildSectionTitle('加载状态组件'),
            _buildLoadingExamples(),
            const SizedBox(height: 32),
            
            _buildSectionTitle('状态按钮组件'),
            _buildButtonExamples(),
            const SizedBox(height: 32),
            
            _buildSectionTitle('列表状态组件'),
            _buildListExamples(),
          ],
        ),
      ),
    );
  }

  Widget _buildSectionTitle(String title) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 16),
      child: Text(
        title,
        style: Theme.of(context).textTheme.headlineSmall,
      ),
    );
  }

  Widget _buildSkeletonExamples() {
    return Column(
      children: [
        SkeletonLayouts.listItem(),
        const SizedBox(height: 16),
        SkeletonLayouts.articleCard(),
        const SizedBox(height: 16),
        Row(
          children: [
            SkeletonShapes.avatar(),
            const SizedBox(width: 16),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SkeletonShapes.textLine(height: 20),
                  const SizedBox(height: 8),
                  SkeletonShapes.textLine(width: 200, height: 16),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }

  Widget _buildLoadingExamples() {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            LoadingWidget(
              type: LoadingIndicatorType.circular,
              state: loadingState,
            ),
            LoadingWidget(
              type: LoadingIndicatorType.dots,
              state: loadingState,
            ),
            LoadingWidget(
              type: LoadingIndicatorType.pulse,
              state: loadingState,
            ),
          ],
        ),
        const SizedBox(height: 16),
        const InlineLoading(message: '加载中...'),
        const SizedBox(height: 16),
        ElevatedButton(
          onPressed: () {
            setState(() {
              switch (loadingState) {
                case LoadingState.loading:
                  loadingState = LoadingState.success;
                  break;
                case LoadingState.success:
                  loadingState = LoadingState.error;
                  break;
                case LoadingState.error:
                  loadingState = LoadingState.loading;
                  break;
                case LoadingState.idle:
                  loadingState = LoadingState.loading;
                  break;
              }
            });
          },
          child: const Text('切换加载状态'),
        ),
      ],
    );
  }

  Widget _buildButtonExamples() {
    return Column(
      children: [
        StateButtons.primary(
          onPressed: _handleButtonPress,
          state: buttonState,
          child: const Text('主要按钮'),
        ),
        const SizedBox(height: 16),
        StateButtons.secondary(
          onPressed: _handleButtonPress,
          state: buttonState,
          child: const Text('次要按钮'),
        ),
        const SizedBox(height: 16),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            StateButtons.text(
              onPressed: _handleButtonPress,
              state: buttonState,
              child: const Text('文本按钮'),
            ),
            StateButtons.icon(
              onPressed: _handleButtonPress,
              state: buttonState,
              icon: const Icon(Icons.favorite),
            ),
          ],
        ),
      ],
    );
  }

  Widget _buildListExamples() {
    return SizedBox(
      height: 300,
      child: ListStateWidget(
        state: listState,
        onRefresh: () async {
          await Future.delayed(const Duration(seconds: 2));
          setState(() {
            listState = ListState.success;
          });
        },
        child: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) => ListTile(
            leading: CircleAvatar(child: Text('${index + 1}')),
            title: Text('项目 ${index + 1}'),
            subtitle: Text('这是项目 ${index + 1} 的描述'),
          ),
        ),
      ),
    );
  }

  void _handleButtonPress() async {
    setState(() {
      buttonState = ButtonState.loading;
    });
    
    await Future.delayed(const Duration(seconds: 2));
    
    if (mounted) {
      setState(() {
        buttonState = ButtonState.success;
      });
      
      await Future.delayed(const Duration(seconds: 1));
      
      if (mounted) {
        setState(() {
          buttonState = ButtonState.idle;
        });
      }
    }
  }
}